import React, { Component } from 'react';
import {
    View, Text,
    StyleSheet, ImageBackground,
    Image, ScrollView,
    TouchableWithoutFeedback, FlatList
} from 'react-native';
import { connect } from 'react-redux'
import { Colors, AppStyles } from '../../style';
import images from '../../images';
import ClassItem from '../../common/components/ClassItem';
import CoachItem from '../../common/components/CoachItem';
import LookMore from '../../common/components/LookMore';


var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;

const imageHeight = screenWidth * 6 / 16;
@connect()
export default class ShopDetail extends Component {

    static navigationOptions = {
        header: null
    }

    render() {
        return (<ScrollView>
            <View style={styles.container}>
                <View style={styles.titleBar}></View>
                <ImageBackground style={styles.Image}>
                    <View style={{
                        position: 'absolute',
                        width: 70, height: 25,
                        borderRadius: 15,
                        backgroundColor: 'rgba(255,255,255,0.5)',
                        justifyContent: 'center',
                        alignItems: 'center',
                        bottom: 5, right: 5,
                        flexDirection: 'row'
                    }}>
                        <Image source={images.image}
                            style={{ width: 20, height: 20, marginRight: 5 }} />
                        <Text style={AppStyles.smallTextStyle}>55</Text>
                    </View>
                </ImageBackground>
                <View style={styles.black} />
                <View style={styles.item}>
                    <View style={{ margin: 10 }}>
                        <Text style={AppStyles.bigTextStyle}>XXX健身俱乐部</Text>
                        <Image style={{ width: 60, height: 10, marginTop: 2, marginLeft: 3 }} source={images.star5} />
                    </View>
                </View>
                <View style={styles.black} />
                <View style={[styles.item, { height: 50 }]}>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                        <Image source={images.person}
                            style={{ width: 30, height: 30 }} />
                        <Text style={AppStyles.mediumTextStyle}>店长: 周星星</Text>
                        <View style={{ position: 'absolute', right: 0, flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={AppStyles.mediumTextStyle}>营业详情</Text>
                            <Image style={{ width: 25, height: 25 }} source={images.right} />
                        </View>
                    </View>
                </View>
                <View style={styles.black} />
                <View style={[styles.item,]}>
                    <View style={{ margin: 10, }}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Image source={images.address}
                                style={{ width: 30, height: 30 }} />
                            <Text style={AppStyles.mediumTextStyle}>地址: 周星星</Text>
                        </View>
                        <View style={{ height: 10 }}></View>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Image source={images.call}
                                style={{ width: 30, height: 30 }} />
                            <Text style={AppStyles.mediumTextStyle}>电话: 周星星</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.black} />
                <View style={styles.title}>
                    <Text style={AppStyles.mediumTextStyle}>团体课</Text>
                </View>
                <View style={[styles.black, { height: 1, marginLeft: 10, }]} />
                <ClassItem />
                <ClassItem />
                <ClassItem />
                <ClassItem />
                <LookMore>
                    <ClassItem />
                    <ClassItem />
                    <ClassItem />
                </LookMore>
                <View style={styles.black} />
                <View style={styles.title}>
                    <Text style={AppStyles.mediumTextStyle}>教练</Text>
                </View>
                <View style={[styles.black, { height: 1, marginLeft: 10, }]} />
                <View style={{ marginBottom: 10 }}>
                    <FlatList renderItem={this._renderItem}
                        data={[1, 2, 3, 4, 6, 7, 8, 9]}
                        horizontal={true}
                    />
                </View>
            </View>
        </ScrollView>)
    }
    _renderItem = ({ item }) => {
        return <CoachItem />
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    titleBar: {
        width: screenWidth,
        height: 60,
        backgroundColor: Colors.black,
        position: 'absolute',
        zIndex: 2,
        opacity: 0.0
    },
    Image: {
        width: screenWidth,
        height: imageHeight,
        backgroundColor: Colors.orange
    },
    item: {
        width: screenWidth,
        marginTop: 5,
        justifyContent: 'center'
    },
    title: {
        width: screenWidth,
        height: 35,
        justifyContent: 'center'
    },
    black: {
        width: screenWidth,
        height: 5,
        backgroundColor: Colors.grey
    }
})